<!-- 首页 -->
<template>
	<view>
		<!-- 搜索 -->
		<view class="m-h-100">
			<search-box :searchStatus="false" :bool="bool" @gettabClick="gettabClick" @search="search"
				@confirm="confirm" :cityName="city" :getcity="getcity" :types="1"></search-box>
			<view style="background-color: #F2F2F2;height: 10rpx;"></view>
		</view>
		<view class="m-popup">
			<u-popup :show="show" :overlay="true" :duration="0" mode="top" height="200rpx"
				:customStyle="{ top: popupTop - 10 + 'px' }" @close="show = false" :closeOnClickOverlay="true">
				<!-- 区域 -->
				<view class="boxgu">
					<view class="" v-if="cut === 0">
						<view class="u-flex u-flex-between u-flex-1 m-mg-lr">
							<view class="w_33">
								<view class="u-m-t-30" v-for="(item, index) in cityall"
									:class="cut0 === index ? 'itemon' : ''" :key="index"
									@click="getxuancity(index, item, '1')">
									{{ item.name }}
								</view>
							</view>
							<view class="w_33">
								<view class="u-m-t-30" v-for="(item, index) in cityallchild"
									:class="cityind === index ? 'itemon' : ''" :key="index"
									@click="getxuancity(index, item, '2')">
									{{ item.name }}
								</view>
							</view>
							<view class="w_33">
								<view class="u-m-t-30" v-for="(item, index) in cityallchildchild"
									:class="citychid === index ? 'itemon' : ''" :key="index"
									@click="getxuancity(index, item, '3')">
									{{ item.name }}
								</view>
							</view>
						</view>
					</view>
					<!-- 价格 -->
					<view class="cut1-item c62" v-if="cut === 1 || cut === 2 || cut === 4">{{ params.title }}</view>
					<view class="u-flex u-flex-wrap u-m-t-30" v-if="cut === 1 || cut === 2 || cut === 4">
						<view class="cut2-item" v-if="cut === 1" :class="cut1 === index ? 'item-on' : ''"
							v-for="(item, index) in params.list" :key="index" @click="getin(index, item, cut)">
							<text>{{ item.label }}</text>
						</view>
						<view class="cut2-item" v-if="cut === 2" :class="cut2 === index ? 'item-on' : ''"
							v-for="(item, index) in params.list" :key="index" @click="getin(index, item, cut)">
							<text>{{ item.label }}</text>
						</view>
						<view class="cut2-item" v-if="cut === 4" :class="cut4 === index ? 'item-on' : ''"
							v-for="(item, index) in params.list" :key="index" @click="getin(index, item, cut)">
							<text>{{ item.label }}</text>
						</view>
					</view>
					<view class="" v-if="cut === 3">
						<view class="cut1-item c62">更多选项</view>
						<view class="u-m-t-30 m-mg-lr">
							<view class="u-flex u-m-b-20" v-for="(item, index) in listdata" :key="index">
								<view class="w_30 u-m-t-15">{{ item.name }}</view>
								<view class="u-m-l-30 u-flex u-flex-wrap w_70">
									<view class="cut2-item" :class="it.bool ? 'item-on' : ''"
										v-for="(it, ind) in item.child" :key="ind" @click="goduo(index, ind)">
										<text>{{ it.name }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="height: 80rpx;"></view>
				<view class="u-flex u-abso boxbottom">
					<view class="u-flex-1" @click="Reset">
						<view class="button-one">重置</view>
					</view>
					<view class="u-flex-1" @click="requestStatus ? determine() : ''">
						<view class="button-two">确定</view>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 功能 -->
		<u-gap height="35"></u-gap>
		<view class="u-p-t-30 u-p-b-30">
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(item, index) in baseListone" :key="index" @click="nextNav(item.url)">
					<u-icon size="40" :name="item.icon"></u-icon>
					<text class="u-m-t-20">{{ item.text }}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 列表 -->
		<view class="heighly">
			<!-- <list-group :list="dataList" :listHighly="highly"></list-group> -->
			<newlist :list="dataList" :listHighly="highly" textType="在售"></newlist>
		</view>
		<u-back-top :scrollTop="scrollTop" top="200"></u-back-top>
		<u-loading-page :loading="pageLoad"></u-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				getcity: [],
				baseListone: [],
				dataList: [],
				colorList: ['#00B7EE', '#9BD338', '#D37A38'],
				city: '东莞',
				popupTop: 0,
				popupTopW: 0,
				show: false,
				cut: 0,
				yw: 0,
				nums: 1,
				cut0: null,
				cut1: null,
				cut2: null,
				cut3: null,
				cut4: null,
				cutname0: null,
				cutname1: null,
				cutname2: null,
				cutname3: null,
				cutname4: null,
				scrollTop: 0,
				bool: true,
				cityind: 0,
				citychid: 0,
				cityindname: '', //城市
				citychildname: '', // 区域
				cityallchild: [{
					name: '不限'
				}],
				cityallchildchild: [{
					name: '不限'
				}],
				listdata: [{
						name: '建筑面积:',
						child: [{
								name: '50以下',
								bool: false
							},
							{
								name: '50-70m²',
								bool: false
							},
							{
								name: '70-100m²',
								bool: false
							},
							{
								name: '100-130m²',
								bool: false
							},
							{
								name: '130-150m²',
								bool: false
							},
							{
								name: '150-200m²',
								bool: false
							},
							{
								name: '200-300m²',
								bool: false
							},
							{
								name: '300m²以上',
								bool: false
							}
						]
					},
					{
						name: '特色:',
						child: [{
								name: '无限购条件',
								bool: false
							},
							{
								name: '非毛坯',
								bool: false
							},
							{
								name: '带装修',
								bool: false
							},
							{
								name: '豪宅',
								bool: false
							},
							{
								name: '商业综合体',
								bool: false
							}
						]
					},
					{
						name: '开盘时间:',
						child: [{
								name: '近期开盘',
								bool: false
							},
							{
								name: '未来三个月',
								bool: false
							},
							{
								name: '过去三个月',
								bool: false
							}
						]
					},
					{
						name: '佣金:',
						child: [{
								name: '1-3万',
								bool: false
							},
							{
								name: '3-5万',
								bool: false
							},
							{
								name: '5-8万',
								bool: false
							},
							{
								name: '8-15万',
								bool: false
							},
							{
								name: '15-20万',
								bool: false
							},
							{
								name: '20-30万',
								bool: false
							},
							{
								name: '30万以上',
								bool: false
							}
						]
					}
				]
			};
		},
		async onLoad() {
			this.baseListone = [{
					icon: this.oss + '/index/col_01.png',
					text: '地图找房',
					url: '/pages/room/mapRoom'
				},
				{
					icon: this.oss + '/index/col_02.png',
					text: '帮我找房',
					url: '/pages/room/helpRoom'
				},
				{
					icon: this.oss + '/index/col_03.png',
					text: '购房资格',
					url: '/pages/room/purchase'
				},
				{
					icon: this.oss + '/index/col_04.png',
					text: '笋盘推荐',
					url: '/pages/room/recommend'
				}
			];
			let getcity = uni.getStorageSync('getcity');
			if (getcity) {
				this.getcity = JSON.parse(getcity);
			} else {
				let getcity = await this.require('getcity');
				if (getcity) {
					getcity.unshift({
						id: 0,
						name: '不限'
					});
					this.getcity = getcity;
					uni.setStorageSync('getcity', JSON.stringify(getcity));
				}
			}
			this.city = this.getcity[1] ? this.getcity[1].name : '东莞市';
			this.path = 'propertieslist';
			this.params = {
				...this.params,
				pnum: this.pnum,
				city: this.city,
				loupanleixing: '新房'
			};
			await this.getList();
			setTimeout(() => {
				this.pageLoad = false;
			}, 1000);
			let cityall = uni.getStorageSync('cityall');
			if (cityall) {
				this.cityall = JSON.parse(cityall);
			} else {
				let cityallNew = await this.require('cityall');
				if (cityallNew) {
					cityallNew.unshift({
						name: '不限',
						child: [{
							name: '不限',
							child: [{
								name: '不限'
							}]
						}]
					});
					this.cityall = cityallNew;
				}
			}
		},
		onReady() {
			this.sumHeight('.m-popup');
			this.sumHeightTop('.boxheight');
		},
		onPageScroll(e) {
			// this.scrollTop = e.scrollTop;
			// if (e.scrollTop > 50) {
			// 	this.bool = true;
			// } else {
			// 	if (this.nums == 1) {
			// 		this.bool = false;
			// 	}
			// 	this.show = false;
			// }
		},
		methods: {
			getxuancity(ind, item, key) {
				switch (+key) {
					case 1:
						this.cityind = 0;
						this.citychid = 0;
						this.cut0 = ind;
						this.cityallchild = item.child;
						this.cityallchildchild = this.cityallchild[0].child;
						this.cityindname = this.city = item.child[0].name;
						this.citychildname = item.child[0].child[0].name;
						break;
					case 2:
						this.citychid = 0;
						this.cityind = ind;
						this.cityallchildchild = item.child;
						this.cityindname = this.city = item.name;
						this.citychildname = item.child[0].name;
						break;
					case 3:
						this.citychid = ind;
						this.citychildname = item.name;
						break;
					default:
						break;
				}
			},
			//重置
			Reset() {
				this.cut0 = 0;
				this.cut1 = null;
				this.cut2 = null;
				this.cut4 = null;
				this.yw = '';
				this.cityind = 0;
				this.citychid = 0;
				this.cityindname = '不限';
				this.citychildname = '不限';
				this.listdata.map((p, i) => {
					p.child.map((a, b) => {
						a.bool = false;
					});
				});
			},
			//确定
			async determine() {
				// this.requestStatus = false;
				this.show = false;
				let rooms = ''; //面积小
				let roomsmax = ''; //面积大
				let characteristic = ''; //特色
				let commission = ''; //佣金小
				let commissionmax = ''; //佣金大
				let opentime = ''; //开盘时间
				this.listdata.map((p, i) => {
					p.child.map((a, b) => {
						if (a.bool) {
							// 面积
							if (i === 0) {
								if (b === 0) {
									rooms = '50以下';
								} else if (b === 7) {
									roomsmax = '300以上';
								} else {
									rooms = a.name.split('-')[0] * 1;
									if (!a.name.split('-')[1]) return;
									roomsmax = a.name.split('-')[1].split('m²')[0] * 1;
								}
							}
							i === 1 ? (characteristic = a.name) : '';
							i === 2 ? (opentime = a.name) : '';
							if (i === 3) {
								// 佣金
								if (b === 6) {
									commissionmax = '300000以上';
								} else {
									commission = a.name.split('-')[0] * 10000;
									if (!a.name.split('-')[1]) return;
									commissionmax = a.name.split('-')[1].split('万')[0] * 10000;
								}
							}
						}
					});
				});
				let par = {};
				//总价切
				if (this.cut1 != null) {
					if (this.cut1 === 0) {
						par.price = '';
					} else if (this.cut1 === 1) {
						par.price = '1000000以下';
					} else if (this.cut1 === 6) {
						par.pricemax = '5000000以上';
					} else if (this.cut1 < 6) {
						par.price = this.cutname1.split('-')[0] * 10000;
						par.pricemax = this.cutname1.split('-')[1].split('万')[0] * 10000;
					}
				}
				this.params = {
					p: 1,
					city: this.city,
					pnum: this.pnum,
					// areaname: this.cutname0 ? this.cutname0 : this.city,
					price: par.price || '',
					pricemax: par.pricemax || '',
					// bedroom: this.cut2 < 5 && this.cut2 ? this.cut2 + 1 : this.cut2 == 5 ? '5以上' : '',
					bedroom: '',
					rooms,
					roomsmax,
					characteristic,
					commission,
					commissionmax,
					opentime,
					loupanleixing: '新房'
				};
				for (let var1 in this.params) {
					if (this.params[var1] == '不限' || !this.params[var1]) {
						delete this.params[var1];
					}
				}
				await this.getList();
				this.requestStatus = true;
				if (this.dataList.length == 0) {
					this.nums = 2;
				} else {
					this.nums = 1;
				}
			},
			async confirm(e) {
				this.city = e;
				uni.setStorageSync('city', this.city);
				this.path = 'propertieslist';
				this.params = {
					...this.params,
					pnum: this.pnum,
					city: this.city,
					loupanleixing: '新房'
				};
				await this.getList();
			},
			getin(index, item, cut) {
				this['cut' + this.cut] = index;
				if (this.cut != 0) {
					this['cutname' + cut] = item.label;
				}
			},
			goduo(index, ind) {
				this.listdata[index].child.map((p, i) => {
					if (p.bool) {
						if (i != ind) {
							p.bool = false;
						}
					}
				});
				this.listdata[index].child[ind].bool = !this.listdata[index].child[ind].bool;
			},
			gettabClick(index) {
				this.requestStatus = false;
				this.cut = index;
				this.show = true;
				this.params = {};
				switch (index) {
					case 0:
						this.cityall.map((p, i) => {
							p.child.map((a, b) => {
								if (this.city == a.name) {
									this.cut0 = i;
									this.cityallchild = p.child;
									this.cityallchildchild = a.child;
									this.cityind = b;
								}
							});
						});
						break;
					case 1:
						this.params = {
							title: '价格区间（万）：',
							list: [{
									id: 1,
									label: '不限'
								},
								{
									id: 2,
									label: '100万以下'
								},
								{
									id: 3,
									label: '100-150万'
								},
								{
									id: 4,
									label: '150-200万'
								},
								{
									id: 5,
									label: '200-300万'
								},
								{
									id: 6,
									label: '300-500万'
								},
								{
									id: 4,
									label: '500万以上'
								}
							]
						};
						break;
					case 2:
						this.params = {
							title: '房型：',
							list: [{
									id: 1,
									label: '一室'
								},
								{
									id: 2,
									label: '二室'
								},
								{
									id: 3,
									label: '三室'
								},
								{
									id: 4,
									label: '四室'
								},
								{
									id: 5,
									label: '五室'
								},
								{
									id: 6,
									label: '五室以上'
								}
							]
						};
						break;
					case 4:
						this.params = {
							title: '排序',
							list: [{
									id: 1,
									label: '默认排序'
								},
								{
									id: 3,
									label: '总价从低到高'
								},
								{
									id: 4,
									label: '总价从高到低'
								},
								{
									id: 5,
									label: '面积从小到大'
								},
								{
									id: 6,
									label: '面积从大到小'
								}
							]
						};
						break;
					default:
						break;
				}
				this.requestStatus = true;
			},
			// 计算高度
			sumHeight(element) {
				let _this = this;
				let win_height = 0;
				const query = uni.createSelectorQuery();
				query.select(element).boundingClientRect();
				query.selectViewport().scrollOffset();
				query.exec(function(res) {
					if (res[0]) {
						_this.popupTop = res[0].top + 37;
					}
				});
			},
			sumHeightTop(element) {
				let _this = this;
				let win_height = 0;
				const query = uni.createSelectorQuery();
				query.select(element).boundingClientRect();
				query.selectViewport().scrollOffset();
				query.exec(function(res) {
					if (res[0]) {
						_this.popupTopW = res[0].top;
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.boxheight {
		height: 64rpx;
		position: absolute;
		left: 0;
		right: 0;
		z-index: 10076;
	}

	.w_33 {
		width: 32%;
		height: 450rpx;
		overflow-y: auto;
	}

	.button-two {
		color: white;
		text-align: center;
		background-color: #0e5642;
		line-height: 60rpx;
		height: 60rpx;
	}

	.button-one {
		color: #646262;
		text-align: center;
		line-height: 60rpx;
		height: 60rpx;
	}

	.w_30 {
		width: 20%;
		text-align: right;
	}

	.w_70 {
		width: 80%;
	}

	.boxgu {
		height: 450rpx;
		overflow-y: auto;
		background-color: #f2f2f2;
	}

	.boxrow {
		align-items: center;
		height: 64rpx;
	}

	.ch {
		color: #dbb07b;
	}

	.boxbottom {
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
	}

	.c5 {
		color: #5a5a5a;
	}

	.itemon {
		color: #0e5642;
		font-size: 32rpx;
	}

	.c62 {
		color: #636262;
		padding-left: 20rpx;
	}

	.cut1-item {
		height: 60rpx;
		line-height: 60rpx;
		background-color: #fff;
	}

	.cut3-item {
		height: 60rpx;
		line-height: 60rpx;
		color: #606060;
	}

	.cut2-item {
		display: inline-block;
		padding: 0 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-left: 25rpx;
		margin-bottom: 20rpx;
		color: #606060;
	}

	.item-on {
		background-color: #0e5642 !important;
		color: #ffffff;
	}
</style>
